<template>
  <div class="latency-map">
    <div class="rectangle">
      <div class="container">
        <div
          class="content_box"
          v-for="item in options"
          :key="item"
          :class="{ active: selectedItem === item }"
          @click="changeLineFn(item)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div class="map_box">
      <!-- 调用全局地图组件 -->
      <LeafletMap ref="mapRef" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
const options: string[] = [
  '全部',
  '欧洲',
  '亚洲',
  '北美洲',
  '非洲',
  '南美洲',
  '大洋洲',
];
const selectedItem = ref('全部');
const mapRef: any = ref(null);

onMounted(() => {
  mapRef.value.changeLatLngShow('国际本地DIA/IPLC');
});

// 点击切换
const changeLineFn = (value: string) => {
  let str = '';
  if (value === '欧洲') {
    str = 'Europe';
  } else if (value === '亚洲') {
    str = 'Asia';
  } else if (value === '北美洲') {
    str = 'North America';
  } else if (value === '非洲') {
    str = 'Africa';
  } else if (value === '南美洲') {
    str = 'South America';
  } else if (value === '大洋洲') {
    str = 'Oceania';
  } else if (value === '全部') {
    str = 'All';
  }
  mapRef.value.changeLatLngShow(str);
  selectedItem.value = value; // 设置选中项
};
</script>

<style lang="scss" scoped>
.latency-map {
  .rectangle {
    height: 98px;
    background-image: url('@/assets/images/global/design/rectangle_1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .container {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .content_box {
        margin: 0 10px;
        width: 190px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background-color: #fefcfc;
        border-radius: 5px;
        font-family: 'SourceHanSansCN-Normal';
        font-size: 16px;
        letter-spacing: 0px;
        color: #091f5f;
        &:hover {
          cursor: pointer;
          background-color: #4097ef;
          color: #fff;
        }

        &.active {
          background-color: #4097ef;
          color: #fff;
        }
      }
    }
  }

  .map_box {
    margin-top: -2px;
    width: 100%;
    height: 800px;
  }
}

// xl(1200px)至xxl(1600px)
@media screen and (min-width: 1201px) and (max-width: 1600px) {
  .container {
    width: 85%;
  }
}

// lg(992px)至xl(1200px)
@media screen and (min-width: 993px) and (max-width: 1200px) {
  .container {
    width: 95%;
  }
}

@media screen and (max-width: 992px) {
  .latency-map {
    .container {
      width: 630px;
      flex-wrap: wrap;
      .content_box:nth-child(1) {
        display: none !important;
      }
    }
  }
}
</style>
